<template>
  <div style="margin: 20px">
    <div class="header">
      <div>
        <div style="color: #6c757d !important">我的邀请</div>
        <div
          style="
            margin: 20px 0;
            color: #000 !important;
            font-size: 3.5rem;
            font-weight: 300 !important;
          "
          >0.00 <span style="color: #6c757d !important; font-size: 18px">CNY</span>
        </div>
      </div>
      <div style="color: #6c757d !important"> 当前剩余佣金 </div>
      <div style="display: flex; margin: 10px 0">
        <!-- <el-icon><Money /></el-icon> -->
        <el-button size="small" color="#0960bd" :icon="Money">放入零钱中</el-button>
        <el-button size="small" color="#0960bd" :icon="Connection">推广佣金提现</el-button>
      </div>
    </div>
    <div class="center">
      <div style="display: flex; align-items: center; justify-content: space-between">
        <div style="color: #6c757d !important">已注册用户数</div>
        <div style="color: #000 !important; font-weight: 300 !important">0人 </div>
      </div>
      <div
        style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px"
      >
        <div style="color: #6c757d !important">佣金比例</div>
        <div style="color: #000 !important; font-weight: 300 !important">20% </div>
      </div>
      <div
        style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px"
      >
        <div style="color: #6c757d !important">确认中的佣金</div>
        <div style="color: #000 !important; font-weight: 300 !important">¥0 </div>
      </div>
      <div
        style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px"
      >
        <div style="color: #6c757d !important">累计获得佣金</div>
        <div style="color: #000 !important; font-weight: 300 !important">¥0 </div>
      </div>
    </div>

    <div class="buy_box">
      <div class="header">
        <span style="font-size: 14px; font-weight: 400">邀请码管理</span>
      </div>
      <div class="content" style="">
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            color: #6c757d !important;
          "
        >
          <div> 邀请码 </div>
          <div> 创建时间 </div>
        </div>
        <div class="ccc">
          <div> jjOfv3Fb </div>
          <div> 2023-12-08 19:15:00 </div>
        </div>
        <div>
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>

    <div class="buy_box">
      <div class="header">
        <span style="font-size: 14px; font-weight: 400">佣金发放记录</span>
      </div>
      <div class="content" style="">
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            color: #6c757d !important;
          "
        >
          <div> 佣金 </div>
          <div> 发放时间 </div>
        </div>
        <div class="ccc">
          <div> 100 </div>
          <div> 2023-12-08 19:15:00 </div>
        </div>
        <div>
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Money, Connection } from '@element-plus/icons-vue';
</script>
<style scoped>
  .header {
    width: 100%;
    height: 200px;
    padding: 20px;
    background-color: white;
  }

  .center {
    width: 100%;
    height: 170px;
    margin-top: 20px;
    padding: 20px;
    background-color: white;
    font-size: 14px;
  }

  .center_1 {
    width: 100%;
    height: 200px;
    margin-top: 20px;
    padding: 20px;
    background-color: white;
  }

  .buy_box {
    display: flex;
    flex-direction: column;
    height: 460px;
    margin-top: 20px;
    border: 1px solid #eee;

    /* padding: 10px; */
    background-color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }

  .content {
    border: 1px solid #eee;
  }

  .buy_box .header {
    display: flex;
    align-items: center;

    /* padding: 10px; */
    height: 50px;
    background-color: #fafafa;
  }

  .ccc {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: white;
    color: #6c757d !important;
  }

  .ccc:hover {
    background: #f1f1f1;
  }
</style>
